<template>
  <swipe-cell id="message-item" :title="info.name" @del="onDelete">
    <div class="row centered content-container" slot="content">
      <div class="icon-container">
        <md-icon class="icon" :name="iconType"></md-icon>
        <div class="svg-container" v-if="info.unread=='true'">
          <svg class="svg">
            <circle cx="3" cy="3" r="3" fill="red" />
          </svg>
        </div>
      </div>
      <div class="column" style="margin-left:20px;" @click="onClick">
        <div class="row between">
          <div class="title text-ellipsis">{{info.name}}</div>
          <div class="date-str">{{dateStr}}</div>
        </div>
        <div class="content">{{info.content}}</div>
      </div>
    </div>
  </swipe-cell>
</template>

<script>
import '@/assets/svgs/xitong_icon.svg';
import '@/assets/svgs/xingcheng_icon.svg';
import '@/assets/svgs/huodong_icon.svg';
import '@/assets/svgs/hudong_icon.svg';
import SwipeCell from '@/components/SwipeCell';
import { Button, Icon } from 'mand-mobile';
import { SYSTEM_MESSAGE, ALLOT_MESSAGE, ACTIVITY_MESSAGE, HUDONG_MESSAGE } from '../types';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'message-item',
  components: {
    [SwipeCell.name]: SwipeCell,
    [Button.name]: Button,
    [Icon.name]: Icon
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          name: '',
          date: '',
          content: '',
          type: '',
          unread: ''
        };
      }
    }
  },
  methods: {
    onDelete() {
      this.$store.dispatch('deleteMessageItem', this.info.type).then(() => {
        this.$store.dispatch('getMessageList');
      });
    },
    onClick() {
      switch (this.info.type) {
        case SYSTEM_MESSAGE:
          this.$router.push({
            name: 'SystemMessage'
          });
          break;
        case ALLOT_MESSAGE:
          this.$router.push({
            name: 'AllotMessage'
          });
          break;
        case ACTIVITY_MESSAGE:
          this.$router.push({
            name: 'ActivityMessage'
          });
          break;
        case HUDONG_MESSAGE:
          this.$router.push({
            name: 'HudongMessage'
          });
          break;
      }
    }
  },
  computed: {
    iconType() {
      let str = 'xitong_icon';
      switch (this.info.type) {
        case SYSTEM_MESSAGE:
          str = 'xitong_icon';
          break;
        case ALLOT_MESSAGE:
          str = 'xingcheng_icon';
          break;
        case ACTIVITY_MESSAGE:
          str = 'huodong_icon';
          break;
        case HUDONG_MESSAGE:
          str = 'hudong_icon';
          break;
      }
      return str;
    },
    dateStr() {
      let str = '';
      let mom = moment(this.info.date, 'x');
      str = mom.calendar(null, {
        sameDay: '[今天]',
        nextDay: '[明天]',
        nextWeek: 'dddd',
        lastDay: '[昨天]',
        lastWeek: '[上] ddd',
        sameElse: 'MMMDo'
      });
      return str;
    }
  }
};
</script>

<style lang="stylus" scoped>
#message-item {
  background-color: #fff;

  .content-container {
    margin: 10px 20px;
  }

  .icon-container {
    width: 80px;
    height: 80px;
    display: inline-block;
    position: relative;

    .icon {
      width: 80px;
      height: 80px;
    }

    .svg-container {
      .svg {
        width: 12px;
        height: 12px;
      }

      position: absolute;
      top: 0;
      right: 0;
    }
  }

  .title {
    font-size: 30px;
    line-height: 42px;
  }

  .date-str {
    font-size: 24px;
    color: color-text-caption;
    line-height: 34px;
  }

  .content {
    /* autoprefixer: off */
    font-size: 26px;
    color: color-text-caption;
    line-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>
